<!DOCTYPE html>
<html style="height: 100%;">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目展示</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css" rel="stylesheet">      
    <link href="css/style.css" rel="stylesheet">
</head>
<style>
	.table{empty-cells:show;border-collapse:collapse;border-spacing:0;float: left;}
	.table-content{padding: 0!important;}
</style>
	<body style="background: #fff;overflow: scroll;position:relative;">
		<div class="tuzhi-content" id="app">
			<img src="img/lantu_01.jpg"/>
			<div class="table-content clearfix">
				<img src="img/shapanline_03.jpg"/>
				<div class="thinkscss fl">
					<table width="100%" class="table-content">
						<thead>
							<tr class="tr-first">
								<th>使用者 users</th>
								<th  colspan="2">前台管理front office</th>
								<th  colspan="2">后台管理back office</th>							
							</tr>
							<tr class="tr-second">
								<th>用户行为</br>axtivity</th>
								<th>接触点</br>touch point</th>
								<th>前端服务流程</br>fore-end</br>processes</th>
								<th>后端内部</br>服务流程</br>iniernal</br>processes</th>
								<th>后端外部</br>服务流程</br>external</br>processes</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for='el in data.Info'>
								<td><textarea v-on:blur="post" v-model="el.axtivity"></textarea></td>
								<td><textarea v-on:blur="post" v-model="el.touchpoint"></textarea></td>
								<td><textarea v-on:blur="post" v-model="el.processes"></textarea></td>
								<td><textarea v-on:blur="post" v-model="el.iniernal"></textarea></td>
								<td><textarea v-on:blur="post" v-model="el.external"></textarea></td>
							</tr>								
						</tbody>
					</table>
				</div>	
				<div class="gaijin-box">
					<table width="100%" class="table-content">
						<tr><th>需改进地方</br>to develop</th></tr>
						<tr v-for='el in data.develop'>
							<td><textarea name="" v-on:blur="post" v-model="el.way" rows="" cols=""></textarea></td>
						</tr>						
					</table>
				</div>
			</div>
		</div>   		
	</body>
    <script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
	<script src="../js/all.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>	
	<script>
		var model= new Vue({
			el:'#app',
			data:{
				use:ComFunJS.getQueryString('use'),		
				teamId:ComFunJS.getQueryString('teamId'),		
				data:{
					Info:[
					{
						axtivity:"",
						touchpoint:"",
						processes:"",
						iniernal:"",
						external:""
					},
					{
						axtivity:"",
						touchpoint:"",
						processes:"",
						iniernal:"",
						external:""
					},
					{
						axtivity:"",
						touchpoint:"",
						processes:"",
						iniernal:"",
						external:""
					}				
					],
					develop:[
						{
							way:""
						},
						{
							way:""
						},
						{
							way:""
						}					
					]
				}				
			},
			methods:{
				getlocation:function(){
					if(localStorage.getItem('lantu')!=''){
						model.data=JSON.parse(localStorage.getItem('lantu'))
					}
					
				},
				post:function(){
					localStorage.setItem('lantu',JSON.stringify(model.data))
				},
	            initWebSocket(teamId){ //初始化weosocket
	                //ws地址
	                const wsuri = ComFunJS.WEBSORCTAPIURL("/webSocketServer/"+this.teamId) ;
	                this.websock = new WebSocket(wsuri);
	                this.websock.onmessage = this.websocketonmessage;
	                this.websock.onclose = this.websocketclose;
	            },
	            websocketonmessage(e){ //数据接收
	            	var _this=this;
	            	if(e!=undefined){
		            	var redata =JSON.parse(e.data);
						model.data=JSON.parse(redata.teamdraw.content);	            		
	            	}
	            },
	            websocketclose(e){  //关闭
	                console.log("connection closed (" + e.code + ")");
	            }					
			},
			mounted:function(){
				this.$nextTick(function(){
					if(model.use==0){
						model.getlocation();
						this.initWebSocket();
						this.websocketonmessage()
						$('input').attr('readonly','')
						$('textarea').attr('readonly','')							
					}						
				})
			}	
		})

	</script>
</html>
